import DrawerFooter from '@/components/DrawerFooter';
import { Button, Form, Input } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useState } from 'react';

const FormItem = Form.Item;

function ChargeForm({ data: origin, onSubmit, onCancel }) {
  const [data, setData] = useState(origin);
  const handleSetData = (value) => {
    setData({
      ...data,
      values: value,
    });
  };
  return (
    <Form
      labelAlign="top"
      fullWidth
      value={data?.values}
      onChange={handleSetData}
      onSubmit={onSubmit}
    >
      <FormItem
        label={t`数量`}
        name="number"
        required
        useLabelForErrorMessage
      >
        <Input placeholder={t`请输入数量`} />
      </FormItem>
      <DrawerFooter>
        <FormItem>
          <Form.Submit validate type="primary" onClick={onSubmit}>{t`保存`}</Form.Submit>
          <Button style={{ marginLeft: 8 }} onClick={onCancel}>{t`取消`}</Button>
        </FormItem>
      </DrawerFooter>
    </Form>
  );
}

export default ChargeForm;
